<template>
  <div class="">
      <div class="tag ">
          <div class="tag_list items" :style="item.selected?activeStyle:commonStyle"
              v-for="(item, index) in list" @click="item.selected=!item.selected">
              <div class="tag_list_name">{{item.name}}</div>
              <div v-if="iconFlag" class="items">
                  <img v-if="index == list.length-1" class="tag_list_img" src="/src/assets/icons/delete.png" alt="">
                  <img v-else class="tag_list_img" src="/src/assets/icons/close_2.png" alt="">
              </div>
          </div>
      </div>
  </div>
</template>

<script lang="ts" setup>

const emits = defineEmits(['clickItem'])

interface TagItem {
  name: string,
  id: number,
  selected: boolean
}

// 组件传来的值
const props = defineProps({
  // 数据
  list: {
      type: Array as () => TagItem[],
      default: [],
  },
  // 是否显示图标
  iconFlag: {
      type: Boolean,
      default: 'false',
  },
  textColor: {
    type: String,
  },
  // 按钮背景颜色
  color: {
      type: String,
  },
  textActiveColor: {
    type: String,
  },
  activeColor: {
    type: String,
  },
  // 清除全部按钮背景颜色
  colorEnd: {
      type: String,
  },
  //tag大小 根据内边距来
  padding: {
      type: String,
      default: '16px 20px',
  },
})

const commonStyle = {
  color: props.textColor,
  background: props.color || props.colorEnd,
  padding: props.padding,
}

const activeStyle = {
  color: props.textActiveColor,
  background: props.activeColor,
  padding: props.padding,
  boxShadow: 'none'
}
</script>

<style lang="less" scoped>
.items{
  display: flex;
  align-items: center;
  box-shadow: 0 0 0 1px #ccc inset;
  user-select: none;
  cursor: pointer;
}

.tag{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.tag_list {
  border-radius: 8px;
  margin-right: 16px;
  color: #FFFFFF;
  margin-bottom: 20px;

  .tag_list_name {
      font-family: PingFang SC;
      font-size: 16px;
      font-weight: 400;
      line-height: 16px;
      text-underline-position: from-font;
      text-decoration-skip-ink: none;
  }

  .tag_list_img {
      width: 20px;
      height: 20px;
      margin-left: 10px;
  }
}
</style>
